<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.js"></script>


</head>

<body>
    <!-- 头部模块 -->
    <div class="header">
        <ul class="left">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="title">
            <span>Data Visualization Display System</span>
        </div>
        <ul class="right">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!-- 主体模块 -->
    <div class="main">
        <!-- 左侧模块 -->
        <div class="main-left">
            <!-- 完成率 -->
            <div class="completion">
                <div class="completion-content">
                    <div class="rate">
                        <h5><span>完成率</span></h5>
                        <p>67%</p>
                    </div>
                </div>
            </div>
            <!-- 闪电 -->
            <div class="lightning">
                <div class="lightning1">
                    <div class="sd1"></div>
                    <div class="jd1">
                        <ul class="cd">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <div class="box1"></div>
                        <div class="box2"></div>
                    </div>
                </div>
                <div class="lightning2">
                    <div class="sd2"></div>
                    <div class="jd2">
                        <ul class="cd">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <div class="box1"></div>
                        <div class="box2"></div>
                    </div>
                </div>
            </div>
            <!-- top3 -->
            <div class="top3">
                <ul>
                    <li id="mendian2"></li>
                </ul>
                <script src="js/template-web.js"></script>
                <script type="text/html" id="tpl-mendian2">
                    {{each data}}
                    <li>
                        <div class="img"></div>
                        <div class="title">{{$value.id}}</div>
                        <div class="content">
                            <p>{{$value.per}}</p>
                            <span>{{$value.name}}</span>
                        </div>
                        {{/each}}
                    </li>
                </script>

            </div>
        </div>
        <!-- 中间模块 -->
        <div class="main-middle">
            <div class="external1"></div>
            <div class="external2"></div>
            <div class="external3"></div>
            <div class="external4"></div>
            <!-- 加载 -->
            <div class="jz1">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="jz2">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <!-- 内边框 -->
            <div class="inner1"></div>
            <div class="inner2"></div>
            <!-- 内加载箭头模块 -->
            <div class="arrow-l">
                <ol>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
            <div class="arrow-r">
                <ol>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
            <!-- 中间仪表图 -->
            <div class="meter"></div>
            <!-- 中间背景canvas -->
            <div class="animate"></div>
            <!-- 销售额 -->
            <div class="sale">
                <p><span>销售额</span></p>
                <p><span>6593625</span></p>
            </div>
        </div>
        <!-- 右侧模块 -->
        <div class="main-right">
            <!-- 同比 -->
            <div class="compare">
                <div class="compare-content">
                    <div class="rate2">
                        <h5><span>同比</span></h5>
                        <p>0.58</p>
                    </div>
                </div>
            </div>
            <!-- 闪电 -->
            <div class="lightning">
                <div class="lightning3">
                    <div class="jd3">
                        <ul class="cd">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <div class="box1"></div>
                        <div class="box2"></div>
                    </div>
                    <div class="sd3"></div>
                </div>
                <div class="lightning4">
                    <div class="jd4">
                        <ul class="cd">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <div class="box1"></div>
                        <div class="box2"></div>
                    </div>
                    <div class="sd4"></div>
                </div>
            </div>
            <!-- top6 -->
            <div class="top6">
                <ul>
                    <li id="mendian"></li>
                </ul>
                <script type="text/html" id="tpl-mendian">
                    {{each data}}
                    <li>
                        <div class="img"></div>
                        <div class="title">{{$value.id}}</div>
                        <div class="content">
                            <p>{{$value.per}}</p>
                            <span>{{$value.name}}</span>
                        </div>
                        {{/each}}
                    </li>
                </script>

            </div>
        </div>
    </div>
    <!-- 底部模块 -->
    <div class="bottom">
        <div class="ul-box">
            <ul>
                <li id="news-list">

                </li>

            </ul>

        </div>
    </div>

    <script type="text/html" id="tpl-news">
        {{each data}}

        <li>
            <div class="li-content">

                <p><span>{{$value.name}}</span></p>
                <p><span>{{$value.quantity}}</span></p>
                <div class="li-box">
                    <div class="box1">
                        <h5><span>完成率</span></h5>
                        <div class="pic">
                            <img src="images/wc.png" alt="">
                            <span>{{$value.finish}}</span>
                        </div>
                    </div>
                    <div class="box2">
                        <h5><span>折扣率</span></h5>
                        <div class="pic">
                            <img src="images/zc.png" alt="">
                            <span>{{$value.discount}}</span>
                        </div>
                    </div>
                    <div class="box3">
                        <h5><span>售罄率</span></h5>
                        <div class="pic">
                            <img src="images/sq.png" alt="">
                            <span>{{$value.sell}}</span>
                        </div>
                    </div>
                    <div class="box4">
                        <h5><span>同比</span></h5>
                        <div class="pic">
                            <img src="images/tb.png" alt="">
                            <span>{{$value.increase}}</span>
                        </div>
                    </div>
                </div>
            </div>
            {{/each}}

        </li>
    </script>
    <script>
        $(function() {
            function getClothesList() {
                $.get('/store2/selectAll', function(res) {
                    if (res.code !== 200) {
                        return alert('获取失败!')
                    }
                    var htmlstr = template('tpl-mendian2', res)
                    $('#mendian2').html(htmlstr)
                    console.log(res.data);
                })
            }

            getClothesList()
        })
    </script>
    <script>
        $(function() {
            function getClothesList() {
                $.get('/store/selectAll', function(res) {
                    if (res.code !== 200) {
                        return alert('获取失败!')
                    }
                    var htmlstr = template('tpl-mendian', res)
                    $('#mendian').html(htmlstr)
                    console.log(res.data);
                })
            }

            getClothesList()
        })
    </script>
    <script>
        $(function() {
            function getClothesList() {
                $.get('/sale/selectAll', function(res) {
                    if (res.code !== 200) {
                        return alert('获取失败!')
                    }
                    var htmlstr = template('tpl-news', res)
                    $('#news-list').html(htmlstr)
                    console.log(res.data);
                })
            }

            getClothesList()
        })
    </script>
</body>





</html>